//学科评估
<template>
  <div class="module_">
    <div class="mb8 flex">
      <back />
      <div class=" flex-justify-end flex-1">
        <el-button :class="active === 1 ? 'active':''" :disabled="active === 1" type="primary" size="small" round plain
          @click="tableHeaderChange(1)">专利列表</el-button>
        <el-button :class="active === 2 ? 'active':''" :disabled="active === 2" type="primary" size="small" round plain
          @click="tableHeaderChange(2)">软著列表</el-button>
        <el-button :class="active === 3 ? 'active':''" :disabled="active === 3" type="primary" size="small" round plain
          @click="tableHeaderChange(3)">商标列表</el-button>
      </div>
    </div>
    <el-table ref="table" :data="tableData" class="flex-1" height="100%" size="medium" border highlight-current-row
      v-loading="tableLoading" stripe @sort-change="tableSortChange">
      <el-table-column v-for="v in tableHeader" :key="v.prop" align="center" show-overflow-tooltip :prop="v.prop"
        :label="v.label" sortable="custom" :min-width="v.width">
      </el-table-column>
    </el-table>

    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
  </div>
</template>

<script>
  // import {Apievaluaterank}  from '@/api'
  import { arr1,arr2,arr3} from '../js/statistical'
  export default {
    name: 'statistical',
    computed: {
      tableHeader() {
        return this['arr' + this.active]
      }
    },
    data() {
      return {
        arr1,
        arr2,
        arr3,
        tableData: [],
        pageparm: {
          page: 1,
          perPage: 20,
          total: 0,
          sort_str: null,
          sort_order: 'asc',
        },
        tableLoading: false,
        active: 1
      }
    },
    activated() {
      // this.getList()
    },
    methods: {
      tableHeaderChange(i) {
        this.active = i
        this.$nextTick(() => {
          this.$refs.table.doLayout()
        })
      },
      tableSortChange(column) {
        if (column.order === "descending") {
          this.pageparm.sort_str = column.prop;
          this.pageparm.sort_order = "desc";
        } else if (column.order === "ascending") {
          this.pageparm.sort_str = column.prop;
          this.pageparm.sort_order = "asc";
        } else {
          this.pageparm.sort_str = null;
          this.pageparm.sort_order = null;
        }
        this.getList()
      },
      //搜索
      searchChane(i, val) {
        this.pageparm[val] = i
        this.pageparm.page = 1
        this.getList()
      },
      //分页
      callFather(pageparm) {
        this.pageparm.page = pageparm.page
        this.pageparm.perPage = pageparm.perPage
        this.getList()
      },
      // getList() {
      //   this.tableLoading = true
      //   Apievaluaterank(this.pageparm).then(({data,page}) => {
      //     this.tableData = data || []
      //     this.pageparm.total = page.total
      //     this.tableLoading = false
      //     this.$set(this.pageparm,'year',data[0].year)
      //   }).catch(() => {
      //     this.tableLoading = false
      //   })
      // },
    },

  }
</script>
<style lang="less" scoped>
  .active {
    background: #409EFF !important;
    border-color: #409EFF !important;
    color: #FFF !important;
  }
</style>